<template>
    <div class="login">
        <div class="login_left">
            <div class="logo">
                <img src="@/assets/img/login-logo.png" />
            </div>
            <div class="welcome">欢迎登录</div>
            <div class="platform">海囤客汽车出口</div>
            <div class="copyright">
                2021 天津盛世恒丰科技有限公司 版权所有
                网站备案/许可证号：津ICP备2021007718号-1
            </div>
        </div>
        <div class="login_right">
            <!-- @command="handleLanguage"   -->
            <c-language class="language" />
            <div class="controls" v-if="type === 0">
                <div class="controls-head">
                    <div class="title">用户登录</div>
                    <div class="controls-info">
                        <span>未有账号,</span>
                        <span class="c-blue f-s-14 pointer" @click="handleRegisterGo">去注册</span>
                    </div>
                </div>
                <c-login-form />
            </div>

            <div class="controls" v-else-if="type === 1">
                <div class="controls-head">
                    <div class="title">用户注册</div>
                    <div class="controls-info">
                        <span>已有账号,</span>
                        <span class="c-blue f-s-14 pointer" @click="handleLoginGo">去登录</span>
                    </div>
                </div>
                <c-register-form @change="handleLoginGo" />
            </div>
        </div>
    </div>
</template>
<script setup>
import cLanguage from "@/components/Language/index.vue";
import cLoginForm from "./components/LoginForm.vue";
import cRegisterForm from "./components/RegisterForm.vue";
import { useLoginHook } from "@/hooks/useSendVerificationCode.js";
const { setCountDown } = useLoginHook();
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const $route = useRoute()
onMounted(() => {
    setCountDown(0);
    checkType()
});
const type = ref(0);

const handleRegisterGo = () => {
    setCountDown(0);
    type.value = 1;
};
const handleLoginGo = () => {
    setCountDown(0);
    type.value = 0;
};
const checkType = () => {
    $route.query.type ? type.value = parseInt($route.query.type) : type.value = 0
}
</script>
<style lang="less" scoped>
.language {
    position: absolute;
    top: 20px;
    right: 330px;
}

.login {
    display: flex;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #051e36;
    background: url("@/assets/img/login-bg.png") no-repeat;
    background-size: 100% 100%;
    .login_left {
        width: 35.9375vw;
        height: 100%;
        background: rgba(71, 131, 210, 0.87);
        display: flex;
        flex-direction: column;
        align-items: center;
        .logo {
            margin-top: 155px;
            width: 220px;
            height: 82px;
        }
        .welcome {
            font-weight: 400;
            font-size: 52px;
            font-weight: 400;
            color: #0e2f4e;
            margin-top: 95px;
        }
        .platform {
            margin-top: 30px;
            font-size: 52px;
            font-weight: 500;
            color: #ffffff;
        }
        .copyright {
            font-size: 12px;
            color: #efefef;
            position: absolute;
            bottom: 0;
            left: auto;
            right: auto;
            margin-bottom: 50px;
        }
    }
    .login_right {
        width: calc(100vw - 35.9375vw);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .controls {
            width: 506px;
            height: auto;
            background: #ffffff;
            box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
                0px 6px 16px 0px rgba(0, 0, 0, 0.08),
                0px 3px 6px -4px rgba(0, 0, 0, 0.12);
            .controls-head {
                margin-top: 50px;
                margin-left: 70px;
                margin-right: 70px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .controls-info {
                    font-size: 14px;
                    font-weight: 400;
                }
                .title {
                    font-size: 24px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: bold;
                    color: #092036;
                }
            }
        }
    }
}
</style>